html{
	background-color:#fcfcfc;
	overflow:auto!important;
}
body.webpage,body.startpage{
	width:auto!important;
	width:960px!important;
	margin:auto;
	background-color:#fff;
	min-height:100%;
	position:relative;
	max-width:960px;
}
body.webpage>.maincontainer,body.startpage>.maincontainer{
	width:940px!important;
	margin:auto;
	background-color:#fff;
	max-width:940px;
	xbackground-image:url('tile.gif');
}
body.webpage>.maincontainer>.regionset,body.startpage>.maincontainer>.regionset{
	left:20px;
	right:20px;
}
/* --------------------- Header area -------------------------- */
.region#header {
	background-color:transparent;
}
sup{
	font-size: .4em;
        color:#a2a2a2;
}
/* custom AppPalette formatting for lateral navigation as no custom class available as of now */
body>.palette_wrapper[id|="header_app_Anonymous"]{
	z-index:150!important;
	xleft:-2px!important;
	xwidth:962px!important;
}
.mainwrapper>#header_app{
	width:900px!important;
	background-color:#ffffff;
	position:fixed!important; /* when position fixed is set; the height and width need to be explicit */
	top:0px;
	height:77px!important;
}
/* all AppPalettes in lateral navigation will come fixed positioned by above */
#header .tabcontent,#lateral_nav .tabcontent,#displayArea .tabcontent{
	border-width:0px; /* turning off all borders for header and main region*/
	background-color:transparent;
}
.header_holder>.simplecontainer{
	overflow:hidden; /* turning off scrollbars */
}
.header_holder>.simplecontainer>.invisiblegroupbox>*{
	position:relative!important;
}
.header_holder h1{
	margin:15px 0px 0px;
}
.header-navigation{
	border:1px solid #c9dbf5;
	border-width:0px 0px 2px;
	height:25px!important;
}
.header-navigation .rollercontainer.horizontal{
	overflow:hidden;
}
/* --------------------- Navigation area -------------------------- */
.region#lateral_nav{
	bottom:30px!important; /* setting on region so that all AppPalettes are affected */
}
/* customization to fix the navigation; can be solved by custom classes on appPalette */
body>.palette_wrapper[id|="basic_menu_Anonymous"],body>.palette_wrapper[id|="data_menu_Anonymous"],body>.palette_wrapper[id|="cuspApps_Anonymous"]{
	xposition:fixed!important;
	/* cannot have this fixed otherwise results in visual shift while scroll appearance */
}
.palette_wrapper .apppalette{
	background-color:transparent;
}
/* --------------------- Main area -------------------------- */
#displayArea,#main{
	background-color:transparent;
}
/* custom AppPalette formatting as no custom class available as of now */
body>.palette_wrapper[id|="display_app_Anonymous"],body>.palette_wrapper[id|="display_app_Anonymous"]>#mainContainer>#app_container>.mainwrapper{
	height:auto!important;
	bottom:30px!important;
}
/* custom AppPalette formatting for main area Apps */
.region#displayArea{
	bottom:30px!important; /* setting on region so that all AppPalettes are affected */
	top:20px!important;
}
#display_app>.maincontainer{
	overflow:visible; /* the appPalette contents are made to flow as per the frame varying height */
}
/* a way to customize iframe by direct Id, rather than custom class on the layout. 
this is useful sometimes, and is used a an illustration here. May not be applicable to all situations */
iframe#main{
	border-width:1px 0px 0px;
	min-height:100%;
}